<template lang="html">

  <div class="user">

     <mt-header title="个人中心" fixed>
       <mt-button icon="back" slot="left" class="btn-back" @click="$router.go(-1)"></mt-button>

        <mt-button icon="search"></mt-button>
        <div slot="right">
            <mt-button icon="more"></mt-button>
        </div>
      </mt-header>


     <!--  <header class="header">
          <div class="header-icon">
              <span class="icon2-user"></span>
          </div>
          <span>登录/注册</span>
      </header> -->
      <div class="user-info">
        <div class="invite-code">邀请码：66884477</div>

          <div class="user-center">
            <div class="user-icon">
              <img src="https://imgsa.baidu.com/forum/pic/item/268c67380cd79123c59abe34a1345982b2b78000.jpg" alt="">
            </div>
            <div class="user-nickname">{{this.userInfo === '' ? '游客' : this.userInfo.username}}</div>
            <div class="user-login" v-if='this.userInfo === ""'>
              <router-link :to="{ path: '/login' }">登录/注册</router-link>
            </div>
          </div>
      </div>
      <div class="main">
          <!-- <router-link class="my-indent" :to="{ name: ''}">
              <span class="my-indent-left">我的订单</span>
              <div class="my-indent-right">
                  <span>全部订单</span>
                  <i class="icon-go"></i>
              </div>
          </router-link> -->

          <section class="my-pay">
              <router-link :to="{ name: '订单', query: { 'status': 'submitted' }}">
                  <p class="count">0</p>
                  <p>
                    <span class="icon2-money"></span>
                    待付款
                  </p>
              </router-link>
              <router-link :to="{ name: ''}">
                  <p class="count">0</p>
                  <p>
                    <span class="icon2-thecar"></span>
                    待收货
                  </p>
              </router-link>
              <router-link :to="{ name: ''}">
                  <p class="count">0</p>
                  <p>
                    <span class="icon2-fixed"></span>
                    已完成
                  </p>
              </router-link>

              <div class="line"></div>

              <router-link :to="{ name: '订单'}">
                  <p class="count">0</p>
                  <p>
                    <span class="icon2-fixed"></span>
                    全部订单
                  </p>
              </router-link>

          </section>
          <section class="my-service">
              <router-link class="my-service-top" :to="{ name: '收货地址'}">
                  <div>
                    <span class="icon2-milogo"></span>
                  </div>
                  <p>
                    <span>收货地址</span><i class="icon-go"></i>
                  </p>
              </router-link>
              <router-link class="my-service-bottom" :to="{ name: '我的资产'}">
                  <div>
                    <span class="icon2-milogo"></span>
                  </div>
                  <p>
                    <span>我的资产</span><i class="icon-go"></i>
                  </p>
              </router-link>
          </section>
      </div>
      <v-baseline></v-baseline>
      <v-footer></v-footer>
    </div>
</template>

<script>
  import { getUserCaptial } from '@/api/user'
  import { userInfo } from '@/api/index'
  import Baseline from '@/common/_baseline.vue'
  import Footer from '@/common/_footer.vue'
  import { Toast } from 'mint-ui'
  export default {
    data () {
      return {
        userInfo: ''
      }
    },
    created () {
      userInfo().then(res => {
        if (res.code === 1) {
          this.userInfo = res.data
        } else {
          Toast(res.message)
        }
      })
    },
    components: {
      'v-baseline': Baseline,
      'v-footer': Footer
    }
  }
</script>

<style lang="less" scoped>
  @import '../assets/fz.less';
  @import '../assets/index/style.css';
  @import '../assets/user/icon/carstyle.css';


  .user {
    width: 100%;
    padding-bottom: 14vw;
    background-color: #F8FCFF;

    div, ul, li, span, a{
      box-sizing: border-box;
    }

    .mint-header{
      background: #fff;
      color: #000;
    }

    .user-info {
      width: 100%;
      height: 35vw;
      background: url(../../static/carbg.png) center 0 #f37d0f;
      background-size: auto 100%;
      padding: 3.2vw 0;
      // display: -webkit-box;
      // display: -ms-flexbox;
      // display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      color: #fff;
      font-size: 3.2vw;
      margin-top: 40px;

      // .header-icon {
      //   border: .4vw solid #ffffff;
      //   background-color: @cl;
      //   margin-left: 4vw;
      //   -webkit-box-sizing: border-box;
      //         box-sizing: border-box;
      //   width: 14vw;
      //   height: 14vw;
      //   line-height: 16vw;
      //   text-align: center;
      //   border-radius: 50%;
      //   span {
      //     .fz(font-size, 54);
      //     &::before {
      //       color: #ffffff;
      //     }
      //   }
      // }
      >span {
        margin-left: 3.2vw;
        .fz(font-size, 30);
        color: #ffffff;
        letter-spacing: .2vw;
      }

      .invite-code{
        color: #fff;
        padding-left: 3.2vw;
      }

      .user-center{
        margin: 0 auto;
        color: #fff;
        text-align: center;

        .user-icon{
          margin: 0 auto;
          border: .4vw solid #ffffff;
          background-color: #FFAA00;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          width: 14vw;
          height: 14vw;
          line-height: 16vw;
          text-align: center;
          border-radius: 50%;
          overflow: hidden;
          margin-bottom: 1.5vh;
          font-size: 3.3vw;

          img {
            width: 100%;
            height: 100%;
            vertical-align: initial;
            box-sizing: border-box;
          }
        }

        .user-nickname, .user-login{
          >a{
            color: inherit;
          }
        }

      }
    }
    .main {
      width: 100%;
      .my-indent {
        width: 100%;
        display: block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #333;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 5vw;
        height: 15vw;
        line-height: 15vw;
        background-color: #fff;
        .bd();
        &:active {
          background-color: rgb(224, 227, 230)
        }

        .my-indent-right {
          span {
            display: inline-block;
            .fz(font-size, 28);
            color: rgba(0, 0, 0, .4);
            position: relative;
          }
          i {
            position: relative;
            top: .8vw;
          }
        }
      }

      .my-pay {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        padding: 2vw 0;
        background-color: #fff;
        .bd();

        font-size: 3vw;
        justify-content: center;
        align-items: center;
        padding: 2vw 2vw;

        >a {
          display: block;
          width: 18%;
          color: #999;
          text-align: center;
          margin: 0 1vw;

          p {
            padding: 0 0 1.5vh;
            text-align: center;

            >span {
              .fz(font-size, 50);
              margin-top: 2.3vw;
              display: inline-block;
              text-align: center;
              display: inline-block;
              margin: 0;
              vertical-align: top;
              font-size: 4vw;
            }
          }
        }

        .line{
          border-right: 0.33vw solid #ccc;
          margin: 0vw 4vw 0vw 6vw;
          padding: 2.5vh 0;
          display: block;
          height: 100%;
          line-height: 100%;
        }
      }

      .my-vip,.my-service,.my-settle {
        width: 100%;
        font-size: 3.5vw;

        .mt();
        .bd();
        .bt();
        >a {
          background-color: #fff;
          display: block;
          width: 100%;
          display: -ms-flex;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          height: 6vh;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          padding: 0 3vw;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;

          &:active {
            background-color: rgb(224, 227, 230);
          }
          >div {
            -ms-flex: 1;
            -webkit-box-flex: 1;
            flex: 1;
            padding-top: 1.3vw;
          }

          // .my-vip-top-div {
          //   padding-top: 0;
          // }
          >p {
            -ms-flex: 10;
            -webkit-box-flex: 10;
                    flex: 10;
            position: relative;

            &:active {
              background-color: rgb(224, 227, 230);
            }

            i {
              position: absolute;
              right: 0;
              top: .4vw;
            }
          }
        }

      }
    }
  }
  /*图标大小不一，重新定义*/

  .icon-go {
    .fz(font-size, 36);
    &::before {
      color: #aba8a8;
    }
  }

  [class^="icon2-"],
  [class*=" icon2-"] {
    .fz(font-size, 50);
  }

  .icon2-service {
    .fz(font-size, 34);
  }

</style>
